<template>
    <div id="about">
        <top-nav :title="title" />
        <center class="log-img-parent">
            <image-vant id="log-img" :src="img.mroLogoBlueIcon"/>
        </center>
        <div id="wechat-qr-code">
            <div>
                <image-vant id="wechat-qrcode-img" :src="img.weCharQrCodeIcon"/>
            </div>
            <span id="wechat-qrcode-explain">"工品业务"微信公众号</span>
        </div>
        <div class="wechat-qrcode-text">工业品业务互助社群平台</div>
        <a href="http://beian.miit.gov.cn/" class="records-text">
            <div>广州讯聚信息技术有限公司</div>
            <div>网站备案：粤ICP备14085282号-1</div>
        </a>
    </div>
</template>

<script>
// 自定义组件
import TopNav from '_components/project/common/TopNav'
import ImageVant from '_components/project/common/ImageVant'

// 自定义方法
import { checkDataEqualVal } from "_commonFn/check"
import { defaultShare } from "_commonFn/share"
import { getProImg } from "_projectFn/images"

// 本地图片 
import mroLogoBlue from '_assets/img/MROlogo-Blue.svg'
import weCharQrCode from '_assets/img/weCharQrCode.jpg'

export default {
    name: 'About',
    data() {
        return {
            title: '关于工品业务',
            img: {
                mroLogoBlueIcon: getProImg('MROlogo-Blue.svg', mroLogoBlue),
                weCharQrCodeIcon: getProImg('weCharQrCode.jpg', weCharQrCode),
            }
        }
    },
    activated() {
        const that = this
        if (that.$store.getters.isWechatBro) {
			checkDataEqualVal({
				data: that.$store.getters,
				key: 'getWechatStatus',
				val: ['success', 'fail'],
				callback(val) {
					if (val === 'success') {
                        defaultShare({
                            title: this.title,
                        })
                    }
				}
			})
        }
    },
    components: {
        TopNav,
        ImageVant,
    }
}
</script>

<style lang="scss" scoped>
#about {
    text-align: center;
    background: #efefef;
    height: 100%;

    .log-img-parent {
        margin-top: 40px;

        #log-img {
            width: 80%;
            max-width: 265px;
            max-height: 100px;
        }
    }

    #wechat-qr-code {
        margin-top: 25px;

        #wechat-qrcode-img {
            width: 136px;
            height: 136px;
        }

        #wechat-qrcode-explain {
            font-size: 12px;
            color: #999999;
            position: relative;
            top: 10px;
        }
    }

    .wechat-qrcode-text {
        font-size: 16px;
        margin-top: 20px;
        font-weight: bold;
    }

    .records-text {
        color: #999999;
        font-size: 12px;
        width: 100%;
        position: fixed;
        bottom: 8px;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }
}
</style>